<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实例方法</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
	<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
	<h1>实例方法</h1>
	<hr>
	<div id="app">
		{{message}}
		
	</div>
	<p><button onclick="destroy()">卸载</button></p>
	<p><button onclick="reload()">刷新</button></p>
	<p><button onclick="tick()">更新</button></p>
</body>
<script type="text/javascript">
var jspang = Vue.extend({
	template:`<p>{{message}}</p>`,
	data:function () {
		return{
			message:'nihxcvxcvxao'
		}
	},
	// 挂载时钩子函数
	mounted:function () {
		
		console.log('创建。。。。');
	},
	// 销毁钩子函数
	destroyed:function () {
		console.log('卸载。。。。');
	},
	updated:function () {
		// body...
		console.log('更新。。。。');
	}

})

var vm = new jspang().$mount("#app");

function destroy() {
	vm.$destroy();
}

function reload() {
	vm.$forceUpdate();
}

function tick() {
	vm.message = 'asd';
	vm.$nextTick(function () {
		console.log('nextTick。。。。');
	});
}
</script>
</html>